<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>领取血糖仪</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../../common/css/vant-index.css" />
		<link rel="stylesheet" type="text/css" href="../../common/css/common.css" />
		<!-- <link rel="stylesheet" type="text/css" href="../css/baseInfo.css" /> -->
		<style>
			body {
				background-color: #f3f3f5;
			}
			.container {
				background-color: #fff;
				border-radius: 0.17rem;
				width: calc(100% - 0.42rem);
				height: 7.4375rem;
				margin: 0.33rem 0.21rem 0 0.21rem;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.title {
				margin-bottom: 0.3125rem;
				display: flex;
				align-items: center;
			}
      .btn {
				width: 5.21rem;
				height: 0.71rem;
				margin: 2.8125rem 1.15rem 0 1.15rem;
				border-radius: 1.42rem;
				background-color: #e22e30;
				color: #fff;
				font-size: 0.41rem;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="container">
				<div class="title">
					<img
						src="../fileSetting/img/finish.png"
						style="width: 0.75rem; height: 0.75rem; margin-right: 0.17rem"
					/>
					<span style="font-size: 0.375rem">您已完成血糖仪发放</span>
				</div>
				<p style="color: #e22e30; font-size: 0.33rem; margin-bottom: 0.83rem">
					请上传患者旧血糖仪设备照片
				</p>
				<div style="position: relative; margin-bottom: 0.33rem" v-if="image">
					<img src="img/delete.png" style="position: absolute;width: 0.5rem;height: 0.5rem;right: -0.25rem;top:-0.25rem" @click="handleDelete"></img>
					<img
						:src="image"
						style="width: 2.92rem; height: 2.92rem"
					/>
				</div>
				<van-uploader v-else :after-read="afterRead" style="margin-bottom: 0.33rem">
					<img
						src="./img/photo.png"
						style="width: 2.92rem; height: 2.92rem"
					/>
				</van-uploader>
				<p style="font-size: 0.29rem; color: #999999">
					请上传一张血糖仪正面且清晰的图片
				</p>
			</div>
      <van-button v-if="image" class="btn" @click="onSubmit">确定</van-button>
		</div>
	</body>
	<!-- 上线环境用 -->
	<script src="../../base.js"></script>
	<script src="../../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../../common/js/axios.min.js"></script>
	<script src="../../common/js/rem.js"></script>
	<script src="../../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../../common/js/api/vue3-axios-utils.js'
		const baseInfo = {
			data() {
				return {
					url: {
						upLoad: '/sys/common/upload',
					},
					image: '',
          doctorId:''
				}
			},
			computed: {},
			created() {
				this.doctorId = url('?id')
        this.glucometerGetId = url('?gid')
      },
			methods: {
        handleDelete(){
          this.image = ''
        },
				afterRead(file) {
					// 此时可以自行将文件上传至服务器
					console.log(file)
					let formData = new FormData()
					formData.append('file', file.file)
					postAction(spliceUrl(this.url.upLoad), formData).then(res => {
						res = res.data
						console.log('upLoad', res)
						if (res.success) {
							this.image = res.message
						}
					})
				},
        onSubmit(){
          postAction(spliceUrl('/glucometerget/photo'),{
            glucometerGetId:this.glucometerGetId,
            photoSrc:this.image
          }).then(res=>{
            res = res.data
            if(res.success){
              this.$toast.success({
              duration: 500,
							message: '提交成功',
              onClose: function () {
									window.location.href =
										'./glucometer.html?id=' + localStorage.getItem('did')
								},
            })
            }
          })
        }
			},
		}

		const app = Vue.createApp(baseInfo)

		app.use(vant)
		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)
		app.use(vant.Popup)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");
		app.mount('#app')
	</script>
</html>
